<template>
    <div class="container">
        <header class="drag">
            <!-- 图钉图标: 固定在桌面 -->
            <div class="thumbtack no-drag" @click="fixedWindow">
                <svg t="1702105499538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="6855" width="25" height="25">
                    <path
                        d="M731.556 550.889l-54.278-94.013V162H346.723v294.876l-54.279 94.013-33.679 58.333H482.834V862h58.333V609.222H765.235l-33.679-58.333z m-112.611 0H359.801l45.255-78.381V220.333h213.889v252.175l45.255 78.381h-45.255z"
                        :fill="isFiexd ? '#0091ff' : '#999999'" p-id="6856"></path>
                </svg>
            </div>
        </header>
        <main>
            <!-- 主体内容插槽 -->
            <slot></slot>
        </main>
        <footer>
            <!-- 底部按钮插槽 -->
            <slot name="footer"></slot>
            <!-- 视频 -->
            <!-- <div class="video" v-if="$route.path === '/telephone/video'">
                <div class="btn">
                    <svg t="1702130307520" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="34311" width="22" height="22">
                        <path
                            d="M381.632 138.688h47.36c68.48 0 123.008 0 165.76 5.76 44.224 5.952 80.64 18.56 109.44 47.36 28.8 28.8 41.408 65.216 47.36 109.44 0.64 4.672 1.216 9.472 1.728 14.464 25.408-20.48 47.552-37.376 66.944-49.088 29.184-17.664 62.72-30.208 96.384-13.44 33.216 16.448 44.352 50.432 49.216 84.608 4.864 34.304 4.864 80.832 4.864 138.112v72.192c0 57.28 0 103.872-4.864 138.112-4.864 34.176-16 68.224-49.28 84.672-33.6 16.64-67.136 4.16-96.32-13.44-19.392-11.776-41.536-28.608-66.944-49.152a443.136 443.136 0 0 1-1.728 14.528c-5.952 44.16-18.56 80.64-47.36 109.44-28.8 28.8-65.216 41.408-109.44 47.36-42.752 5.76-97.28 5.76-165.76 5.76h-47.36c-68.416 0-122.944 0-165.76-5.76-44.16-5.952-80.64-18.56-109.44-47.36-28.8-28.8-41.408-65.28-47.36-109.44-5.76-42.816-5.76-97.408-5.76-165.76V466.944c0-68.352 0-122.88 5.76-165.76 5.952-44.16 18.56-80.64 47.36-109.44 28.8-28.8 65.28-41.344 109.44-47.36 42.816-5.76 97.344-5.76 165.76-5.76z m375.36 489.984c42.88 35.328 72.832 59.712 96.32 73.92 25.024 15.104 32.256 12.224 34.88 10.88 3.008-1.472 9.984-6.272 14.272-36.224 4.096-29.248 4.224-71.232 4.224-131.84V478.592c0-60.672-0.128-102.656-4.224-131.904-4.288-29.952-11.264-34.752-14.272-36.288-2.56-1.28-9.856-4.16-34.88 10.88-23.488 14.272-53.504 38.72-96.32 73.984 0.32 21.952 0.32 45.824 0.32 71.68v90.048c0 25.792 0 49.664-0.32 71.68zM224.384 207.872c-37.12 4.992-57.728 14.208-72.704 29.184-14.912 14.912-24.192 35.584-29.184 72.704-5.12 38.016-5.12 88.32-5.12 159.552v85.376c0 71.296 0 121.6 5.12 159.552 4.992 37.12 14.272 57.792 29.184 72.704 14.976 14.976 35.584 24.256 72.704 29.184 38.08 5.12 88.32 5.184 159.616 5.184h42.688c71.296 0 121.536 0 159.552-5.12 37.12-5.056 57.792-14.272 72.704-29.248 14.976-14.912 24.192-35.584 29.184-72.704 5.12-38.016 5.184-88.32 5.184-159.552V469.312c0-71.296 0-121.536-5.12-159.552-5.056-37.12-14.272-57.792-29.248-72.704-14.912-14.976-35.584-24.192-72.704-29.184-38.016-5.12-88.32-5.184-159.552-5.184H384c-71.296 0-121.6 0-159.616 5.12z"
                            fill="#333333" p-id="34312"></path>
                    </svg>
                </div>
                <div class="text">关闭视频</div>
            </div> -->
            <!-- 退出通话 -->
            <!-- <div class="logout">
                <div class="btn">
                    <svg t="1702130450974" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="35754" width="23" height="23">
                        <path
                            d="M512.420571 321.92c-185.563429 0-359.990857 39.003429-446.994285 126.006857C26.422857 487.350857 6.290286 534.930286 8.868571 592.365714c1.700571 34.706286 12.434286 65.554286 32.548572 85.705143 15.451429 15.433143 36.022857 24.009143 60.434286 20.150857l159.012571-27.008c23.990857-3.84 40.704-11.154286 51.419429-22.290285 14.153143-13.714286 18.432-34.285714 18.432-61.275429l0.438857-43.282286c0-6.857143 2.980571-12.013714 6.857143-16.292571 4.278857-5.138286 10.697143-7.296 15.414857-8.576 29.147429-6.857143 88.722286-13.275429 158.994285-13.275429 70.729143 0 129.865143 5.12 159.012572 13.714286 4.278857 1.28 10.276571 3.84 14.994286 8.137143 4.278857 4.278857 6.857143 8.996571 6.857142 15.853714l0.438858 43.702857c0.420571 27.008 4.699429 47.579429 18.413714 61.293715 11.154286 11.154286 27.867429 18.432 51.858286 22.290285l156.854857 26.569143c25.289143 4.297143 46.72-4.717714 63.451428-20.992 20.114286-19.712 31.268571-50.139429 32.128-84.845714 1.28-57.874286-20.571429-105.453714-59.136-144.018286-87.424-87.003429-259.291429-125.988571-444.854857-125.988571z"
                            p-id="35755" data-spm-anchor-id="a313x.search_index.0.i29.55893a81fQKlCG" class="selected"
                            fill="#ffffff"></path>
                    </svg>
                </div>
                <div class="text">退出通话</div>
            </div> -->
        </footer>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const { ipcRenderer } = require('electron')
const $route = useRoute()

// 屏幕是否固定
let isFiexd = ref<boolean>(false)

// 固定窗口
const fixedWindow = () => {
    isFiexd.value = !isFiexd.value
    ipcRenderer.send('fixed-window', { url: $route.path, isFiexd: isFiexd.value })
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #1a1a1a;
}

header {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: #f3f3f3;
    position: relative;

    .thumbtack {
        position: absolute;
        top: 60%;
        right: 5px;
        transform: translateY(-50%);

    }
}

main {
    width: 100%;
    flex: 1;
    padding: 5px 10px 0;
    box-sizing: border-box;
    overflow: hidden;
}

footer {
    width: 100%;
    height: 100px;
    padding: 15px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;

    .microphone,
    .video,
    .screen,
    .logout {
        width: 70px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;

        .btn {
            width: 45px;
            height: 45px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20%;
        }

        .text {
            color: #fff;
            margin-top: 10px;
        }
    }
    .logout {
        .btn {
            background-color: #ff0040;
        }
    }
}</style>